<template>
  <div class="wrapper">
    <div class="left">
      <ModuleTree />
    </div>
    <div class="right">
      <ModuleView />
    </div>
  </div>
</template>

<script lang="js">
  import ModuleTree from './ModuleTree.vue';
  import ModuleView from './ModuleView.vue';

  export default {
    components: {
      ModuleTree,
      ModuleView,
    },
  }
</script>

<style>
  .wrapper {
    width: 100%;
    height: 900px;
    display: flex;
    flex-direction: row;
    margin-top: 10px;
  }

  .left {
    background: white;
    width: 260px;
    height: 100%;
    margin-left: 10px;
    margin-right: 5px;
    border-radius: 5px;
  }

  .right {
    background: white;
    width: 100px;
    height: 100%;
    flex: 1;
    margin-left: 5px;
    margin-right: 10px;
    border-radius: 5px;
  }
</style>
